<template>
    <div class="goods-banner">
        <div @click="prevSlide" class="banner-left-btn"></div>
        <div class="banner-left-img">
            <div class="carousel-slides">
                <img v-for="(image, index) in images" :key="index" :src="image.image"
                    :style="{ left: index * 100 + '%', 'transform': dynamicstyle }" alt="" />
            </div>
        </div>
        <div class="banner-right-content">
            <div v-for="(image, index) in images" :key="index"
                :style="{ display: index === currentSlide ? 'block' : 'none' }">
                <div style="height: 40px; width: 80%; margin-left: 10%; margin-top: 100px;">
                    <h1>{{ image.title }}</h1>
                    <div class="weekly-product-content-price">￥{{ image.price }}</div>
                </div>
                <div style="height: 60px; width: 80%; margin-left: 10%; margin-top: 40px;">
                    <img class="palace-musemu-logo" src="@/assets/tu/tu15.jpg" alt="">
                    <div class="palace-musemu-name">故宫博物院 | {{ image.keyword }}</div>
                    <button class="learn-more-btn" @click="showInfoCard(image)">了解更多 >></button>
                </div>
                <div class="weekly-product-content-introduction">{{ image.introduction }}</div>
                <div class="weekly-product-content-footer">
                    <el-rate style="float: left; width: 150px" v-model="rate"></el-rate>
                    <p style="float: right; text-align: right; position: relative; top: -18px">
                        <i class="el-icon-view"></i>{{ image.views }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="el-icon-shopping-cart-2"></i>{{ image.shoppings }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="el-icon-chat-dot-square"></i>{{ image.comments }}
                    </p>
                </div>
            </div>
        </div>
        <div @click="nextSlide" class="banner-right-btn"></div>
        <!-- 子组件的挂载点 -->
        <!-- <InformationCard v-if="isInfoCardVisible" :image="selectedProduct" @close="isInfoCardVisible = false" /> -->
    </div>
</template>

<script>
// import InformationCard from "@/components/goods-exhibition-components/information-card.vue";

export default {
    name: "GoodsBanner",
    // components: {
    //     InformationCard
    // },
    data() {
        return {
            images: [
                {
                    id: 1000001,
                    image: require('@/assets/tu/tu1.jpg'),
                    title: '银灰色暗花缎常服袍',
                    price: '1999',
                    introduction: '银灰色暗花缎常服袍，清道光，身长139厘米，两袖通长200厘米，袖口宽26.40厘米，下摆宽119厘米 ，左右裾72厘米。清宫旧藏。此为皇后春秋服饰，圆领，大襟右衽，左右开裾，马蹄袖端。坠铜镀金錾花扣五枚，绿色素纺丝绸里，领口镶滚元青素缎边。面料为江山万代纹暗花缎，图案设计和谐，提花清晰，织造水平较高。',
                    date: '2021/02/19',
                    keyword: '大襟 錾花 织造',
                    views: '11.2k',
                    shoppings: '2.6k',
                    comments: '253'
                },
                {
                    id: 1000002,
                    image: require('@/assets/tu/tu2.jpg'),
                    title: '湖色缎绣琵琶襟袷马褂',
                    price: '2699',
                    introduction: '湖色缎绣藤萝花琵琶襟袷马褂，清晚期，身长60厘米，两袖通长140厘米，袖口宽20厘米，下摆宽65厘米。清宫旧藏。褂立领，右衽琵琶式襟，平袖端。湖色素缎面，品月色素纺丝绸里。领、袖、下摆和襟边镶黑色团寿字织金缎边。通身以黑色棉线运用打籽绣和缉线绣技法绣藤萝花纹，具有简洁素雅的装饰效果。此褂为清代后妃的便服之一。',
                    date: '2021/02/19',
                    keyword: '琵琶襟 织金缎',
                    views: '25.3k',
                    shoppings: '1.6k',
                    comments: '1.0k'
                },
                {
                    id: 1000003,
                    image: require('@/assets/tu/tu3.jpg'),
                    title: '湖色团花织金缎绵马褂',
                    price: '3399',
                    introduction: '湖色团花事事如意织金缎绵马褂，清，身长73厘米， 两袖通长120厘米，袖口宽34厘米，下摆宽80厘米，左右裾长5厘米，后裾长8厘米。清宫旧藏。马褂圆立领，对襟，平袖，左右及后开裾。马褂在湖色冰梅纹暗花缎地上织金柿蒂形开光柿子和如意纹样，谐寓“事事如意”。褂外镶石青万字织金缎边，褂内饰雪青色素纺丝绸里。缀银镀金团龙纹币式扣四，石青素缎盘花扣和铜鎏金錾花扣各一。',
                    date: '2021/02/19',
                    keyword: ' 织金缎 冰梅 如意',
                    views: '2.8k',
                    shoppings: '672',
                    comments: '603'
                },
                {
                    id: 1000004,
                    image: require('@/assets/tu/tu4.jpg'),
                    title: '雪灰色缎绣水仙金纹袷衣',
                    price: '17000',
                    introduction: '雪灰色缎绣水仙金寿字纹袷衣，清光绪，身长145厘米, 两袖通长134厘米，下摆宽132厘米。清宫旧藏。此衣为丝质。圆领，大襟右衽，平阔袖作多层状，左右开裾至腋下云纹处。在雪灰色缎地上运用平针、缠针、套针、平金、戗针等刺绣针法绣制水仙及金团寿纹样。氅衣为清代后妃平时穿用的便服之一，通常套穿在衬衣或便袍之外，具有很好的装饰效果。',
                    date: '2021/02/19',
                    keyword: '大襟 缠针 绦边',
                    views: '3.6k',
                    shoppings: '1.9k',
                    comments: '986'
                },
                {
                    id: 1000005,
                    image: require('@/assets/tu/tu5.jpg'),
                    title: '明黄色绸绣葡萄夹氅衣',
                    price: '6399',
                    introduction: '明黄色绸绣葡萄夹氅衣，清光绪，身长137厘米，两袖通长123厘米，袖口宽28厘米，下摆宽116厘米。清宫旧藏。此为晚清皇后、皇太后春秋两季穿用的便服。圆领，大襟右衽，平袖，呈挽袖折叠状，袖长及肘，直身式袍，缀绿色素纺丝绸里，缀铜镀金錾花扣一枚，襟缀铜镀金錾双喜字币式扣四枚。其中元青色绣葡萄纹边的图案与氅衣面料图案相呼应，主次分明，设计主题更为鲜明。',
                    date: '2021/02/19',
                    keyword: '大襟 织金 织金缎',
                    views: '21.9k',
                    shoppings: '8.6k',
                    comments: '1.2k'
                },
                {
                    id: 1000006,
                    image: require('@/assets/tu/tu6.jpg'),
                    title: '黑绸绣花蝶竹柄团扇',
                    price: '499',
                    introduction: '黑绸绣花蝶竹柄团扇，清，通长48.2厘米，扇宽31厘米。清宫旧藏。扇作十二葵瓣形，扇面黑绸地上双面绣折枝蛱蝶菊花。绣幅宛若图画，讲究虚实向背，层次分明，构图因扇骨而划分为左右二部分。其设色淡雅凝重，不用大红大紫，只在蝶翼稍加较鲜艳的红色，以点亮画面。绣面匀薄，针脚细密，针法相当纯熟。扇面下部有如意形护托，护托正背面分别镶有染牙镂空花片及刺绣桃蝠装饰。扇柄竹制，首尾牙头茜色，柄身留青花卉湖石，工艺亦有可观。',
                    date: '2021/02/19',
                    keyword: ' 折枝 镂空 青花',
                    views: '3.2k',
                    shoppings: '974',
                    comments: '607'
                }
                // ... 更多图片
            ],
            dynamicstyle: "", //动态样式
            currentSlide: 0, //播放序号
            interval: Object,
            isInfoCardVisible: false, // 控制子组件的显示
            selectedProduct: null // 选中的商品
        }
    },
    mounted() {
        // 自动播放动画
        this.startSlideshow()
    },
    methods: {
        nextSlide() {
            // 每次指针加一
            this.currentSlide = (this.currentSlide + 1) % this.images.length
            this.setStyle();
        },
        prevSlide() {
            // 每次减一，为负数时循环
            this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
            this.setStyle();
        },
        // 图片动画
        setStyle() {
            this.dynamicstyle = `translatex(-${this.currentSlide * 100}%)`
        },
        // 定时器
        startSlideshow() {
            this.interval = setInterval(() => {
                this.currentSlide = (this.currentSlide + 1) % this.images.length;
                this.setStyle();
            }, 5000)
        },
        stopSlideshow() {
            clearInterval(this.interval)
        },
        showInfoCard(product) {
            this.selectedProduct = product; // 设置选中的商品
            this.isInfoCardVisible = true; // 显示子组件
        }
    }
};
</script>

<style scoped>
.goods-banner {
    width: 90%;
    height: 600px;
    top: 100px;
    left: 5%;
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #ddd;
    margin-bottom: 100px;
}

.banner-left-img {
    float: left;
    width: 600px;
    position: relative;
    /* background-color: green; */
    border-radius: 5px 0px 0px 5px;
}

.carousel-slides {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.carousel-slides img {
    display: inline-block;
    position: absolute;
    width: inherit;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    height: 100%;
    transition: 0.5s transform ease-in-out;
    border-radius: 5px 0px 0px 5px;
}

.carousel-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.banner-left-btn, .banner-right-btn {
    position: absolute;
    top: 260px;
    height: 80px;
    width: 80px;
    border: none;
    border-radius: 40px;
    z-index: 999;
    background-size: 100%;
    opacity: 0.2;
}

.banner-left-btn:hover, .banner-right-btn:hover {
    cursor: pointer;
    opacity: 0.5;
    box-shadow: 0px 0px 10px #ddd;
}

.banner-left-btn {
    left: -40px;
    background-image: url("../../assets/tu/tu34.png");
}

.banner-right-btn {
    right: -40px;
    background-image: url("../../assets/tu/tu35.png");
}

.banner-right-content {
    width: calc(100% - 600px);
    height: 100%;
    float: right;
    background: linear-gradient(to right, #1D7FED, #6F5ECC);
    border-radius: 0px 5px 5px 0px;
}

h1 {
    font-size: 34px;
    font-weight: 700;
    color: white;
    float: left;
    height: 10px;
    line-height: 40px;
    position: relative;
    top: -24px;
}

.weekly-product-content-price {
    width: 120px;
    float: right;
    height: 40px;
    background-color: #dcedffc8;
    color: #0d6efd;
    line-height: 40px;
    border-radius: 20px;
    font-size: 18px;
    text-align: center;
}

.palace-musemu-logo {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    float: left;
}

.palace-musemu-name {
    float: left;
    margin-left: 20px;
    font-size: 18px;
    font-weight: 300;
    color: white;
    line-height: 60px;
}

.learn-more-btn {
    float: right;
    width: 200px;
    height: 60px;
    border-radius: 30px;
    border: 1.3px solid white;
    color: white;
    background-color: rgba(255, 255, 255, 0);
    font-size: 18px;
}

.learn-more-btn:hover {
    background-color: white;
    color: #0d6efd;
    cursor: pointer;
}

.weekly-product-content-introduction {
    width: calc(80% - 40px);
    padding: 20px;
    margin-top: 50px;
    margin-left: 10%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 10px #ccc;
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
    text-align: justify;
}

.weekly-product-content-introduction:hover {
    background-color: white;
    transition: 0.5s;
}

.weekly-product-content-footer {
    width: 80%;
    height: 30px;
    font-size: 18px;
    font-weight: 300;
    color: white;
    margin-left: 10%;
    position: relative;
    bottom: -20px;
}
</style>